<template>
    <div class="mn-select" >
    	<div class="mn-input" @click="mnInputClick">
    		<i class="mn-input-icon"  :class="{disable:disable}">
    			<span v-bind:class="{'triangle-down':down,'triangle-up':up}"></span>
    		</i>
    		<input type="text" readonly="readonly" autocomplete="off" class="mn-input-inner" v-model="inputValue" :disabled="disabled" :class="{disable:disable}"/>
    	</div>
    	<div class="mn-select-dropdown" v-show="dropdown">
    		<ul class="mn-select-dropdown-list">
    			<li v-for="item in options" :value="item.value" class="mn-select-dropdown-item" @click="optionClick(item)" :class="{selected:optionSelected==item.value}" >
    				<span>{{item.text}}</span>
    			</li>
    		</ul>
    	</div>
    </div>
</template>

<script>
    module.exports = {
        name:"my-select",
        data:function(){
        	return {
        		inputValue:this.value,
        		disable:this.disabled,
        		down:true,
        		up:false,
        		dropdown:false
        	}
        },
        computed:{
        	optionSelected:function(){
        		return this.value
        	}
        },
        props:{
        	value:{
        		default: ''
        	},
        	options:{
        		
        	},
        	disabled:{
        		type: Boolean,
        		default:false
        	}
        },
        methods:{
        	mnInputClick:function(){
        		var vm=this
        		if(!vm.disable){
        			vm.dropdown=!vm.dropdown
	        		vm.down=!vm.down
	        		vm.up=!vm.up
        		}
        	},
        	optionClick:function(item){
        		var vm=this
        		vm.optionSelected=item.value
        		vm.inputValue=item.value
        		vm.$emit('input',item.value)
        		window.setTimeout(function(){
        			vm.mnInputClick()
        		},100)
        	},
        	//按键盘上的Esc键时  下拉框隐藏
        	domKeydown:function(event){
        		var vm=this
                if(!vm.disable){
                	const keyCode = event.keyCode;
                    if (keyCode === 27) {
                        event.preventDefault();
                        vm.dropdown=false
                        vm.down=true
        				vm.up=false
                    }
                }
        	},
        	//点击空白处 下拉框隐藏
        	domClick:function(event){
          		var vm=this
          		if (!this.$el.contains(event.target)){
          			vm.dropdown=false
                    vm.down=true
        			vm.up=false
          		}
        	}
        },
        mounted:function(){
        	document.addEventListener('keydown', this.domKeydown);
        	document.addEventListener('click', this.domClick);
        }
    }
</script>

<style scoped>
	.mn-input .disable{
	    cursor: not-allowed;
	    color:#ccc;
	}
	.mn-select{
		position:relative;
		display: inline-block;
	}
	.mn-input{
		position:relative;
		font-size: 14px;
		display: inline-block;
		width: 100%;
	}
	.mn-input-inner{
		-webkit-appearance: none;
	    -moz-appearance: none;
	    appearance: none;
	    background-color: #fff;
	    background-image: none;
	    border-radius: 4px;
	    border: 1px solid #bfcbd9;
	    box-sizing: border-box;
	    color: #1f2d3d;
	    display: block;
	    font-size: inherit;
	    height: 36px;
	    line-height: 1;
	    outline: none;
	    padding: 3px 10px;
	    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
	    width: 100%;
	}
	.mn-input input{
		cursor: pointer;
	}
	.mn-input-icon{
		position: absolute;
	    width: 35px;
	    height: 100%;
	    right: 0;
	    top: 0;
	    text-align: center;
	    color: #bfcbd9;
	    transition: all .3s;
	}
	.triangle-down,.triangle-up{
		width:0;   
		height:0;  
		position:absolute;
		top:50%;
		right:50%; 
		border-radius: 3px;
	}
	.triangle-down{
		margin:-4px -10px 0 0;
		border:8px solid transparent;    
		border-top-color:#bfcbd9; 
	}
	.triangle-up{  
		margin:-12px -10px 0 0;
		border:8px solid transparent;    
		border-bottom-color:#bfcbd9;
	}
	.mn-select-dropdown{
		position: absolute;
		z-index:1001;
		border:1px solid #d1dbe5;
		border-radius: 2px;
		background-color: #fff;
	    box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 0 6px rgba(0,0,0,.04);
	    box-sizing: border-box;
	    margin: 5px 0;
	    width: 100%;
	    max-height: 274px;
	    overflow: auto;
	}
	.mn-select-dropdown-list{
		list-style: none;
	    padding: 6px 0;
	    margin: 0;
	    box-sizing: border-box;
	    width: 100%;
	}
	.mn-select-dropdown-item{
		font-size: 14px;
	    padding: 8px 10px;
	    position: relative;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    color: #48576a;
	    height: 36px;
	    line-height: 1.5;
	    box-sizing: border-box;
	    cursor: pointer;
	}
	.mn-select-dropdown-item:hover{
		background-color: #e4e8f1;
	}
	.mn-select-dropdown-item.selected{
		color: #fff;
    	background-color: #20a0ff;
	}
</style>